<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>总结vue监视数据</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!-- 
		Vue监视数据的原理:
		1.Vue会监视data中所有层次的数据.
		2.如何监测对象中的数据?
			通过setter实现监视,且要在new Vue时就传入要监测的数据.
			(1).对象中后追加的属性,Vue默认不做响应式处理
			(2).如需给后添加的属性做响应式,请使用如下API:
				Vue.set(target.propertyName/index,value)或
				vm.$set(target.propertyName/index,value)
		3.如何监测数组中的数据?
			通过包裹数组更新元素的方法实现,本质就是做了两件事
				(1).调用原生对应的方法对数组进行更新.
				(2).重新解析模板,进而更新页面.
		4.在Vue修改数组中的某个元素一定要用如下方法:
			1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
			2.Vue.set()或vm.$set()
		特别注意:Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性!!!
		-->
		<div id="root">
			<h2>学生信息</h2>
			<button @click="student.age++">年龄+1岁</button><br />
			<button @click="addSex">添加性别属性,默认值男</button><br />
			<button @click="student.sex='未知'">修改性别</button><br />
			<button @click="addFriend">在列表首位添加一个朋友</button><br />
			<button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button><br />
			<button @click="addHobby">添加一个爱好</button><br />
			<button @click="updateHobby">修改一个爱好为:开车</button>
			<h3>姓名:{{student.name}}</h3>
			<h3>年龄:{{student.age}}</h3>
			<h3 v-if="student.sex">性别:{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) of student.hobby" :key="index">{{h}}</li>
			</ul>
			<button @click="modify0">将抽烟改为打台球</button>
			<h3>朋友们</h3>
			<ul>
				<li v-for="(f,index) in student.friends":key="index">
					{{f.name}} -- {{f.age}}
				</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					person:{id:'001','name':'马冬梅',age:29},
					student:{
						name:'临平',
						age:20,
						hobby:['抽烟','喝酒','打游戏'],
						friends:[
							{name:'jerry',age:35},
							{name:'tony',age:36}
						]
					}
				},
				methods:{
					addSex(){
						//Vue.set(this.person,'sex','男')
						// 无法往vm或 _data根上添加属性
						this.$set(this.student,'sex','男')
					},
					addFriend(){
						this.student.friends.unshift({name:'jack',age:80});
					},
					updateFirstFriendName(){
						this.student.friends[0].name = '张三';
					},
					addHobby(){
						this.student.hobby.push('学习');
					},
					updateHobby() {
						this.student.hobby.splice(0,1,'开车');
						//Vue.set((this.student.hobby,0,'开车');
						//this.$set(this.student.hobby,0,'开车');
					},
					modify0(){
						this.student.hobby.push('瑜伽');
						this.student.hobby.splice(0,1,'打台球')
						this.student.hobby.splice(1,1,'游泳')
						//vm.$set(this.hobby,'0','打台球')						
					}
				}
			});
		</script>
	</body>
</html>